<template>
  <div class="background">
    <el-scrollbar style="min-height:800px;min-width: 1400px;height: 100%">
      <el-col :span="14" style="position: relative;">
        <transition name="fade">
          <img src="../../assets/images/banner-1.2.jpg" style="width: 100%" alt="" v-if="showBox">
        </transition>
        <img src="../../assets/images/bottom-bg.png" class="bottom-img" alt="">
      </el-col>
      <el-col :span="10">
        <transition name="bounce">
          <div class="box" v-if="showBox">
            <div slot="header" style="text-align: center;line-height: 4rem">
              <div><i class="el-icon-eleme" style="font-size: 60px;color: #409EFF"></i></div>
              <span style="font-size: 22px">统 一 登 录 工 作 门 户</span>
              <div style="color: #aaa">Hi~欢迎登录</div>
            </div>
            <el-form :model="form" :rules="rules" ref="form">
              <el-form-item prop="username">
                <el-input placeholder="请输入用户名" v-model="form.username" type="username" @keyup.enter.native="login"
                          size="medium">
                  <template slot="prepend">
                    <i class="el-icon-user"></i> 账 号
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input placeholder="请输入密码" v-model="form.password" :type="isPassword?'':'password'"
                          @keyup.enter.native="login"
                          size="medium">
                  <template slot="prepend">
                    <i class="el-icon-lock"></i> 密 码
                  </template>
                  <i slot="suffix" class="el-input__icon el-icon-view" @click="isPassword = true"
                     @mouseout="isPassword = false"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入验证吗" maxlength="4" v-model="form.verify" @keyup.enter.native="login"
                          size="medium">
                  <template slot="append">
                    <el-image class="key"
                              :src="baseURL+'/small-service-auth/login/verify?key=' +form.key"
                              @click="verifyClick"
                              style="width: 100px; height: 33px;display: block;"></el-image>
                  </template>
                </el-input>
              </el-form-item>
              <div style="font-size: 12px;color: #aaa;margin: 10px;text-align: end">请不要在陌生的网络环境登录！</div>
              <el-form-item>
                <el-button type="primary" style="width: 100%;font-size: 20px" @click="login">登 录
                </el-button>
              </el-form-item>
              <div style="color: #aaa" @click="forgotPassword">忘记密码?</div>
            </el-form>
          </div>
        </transition>
      </el-col>
      <div style="color: #aaa;position: absolute;right: 30px;bottom: 30px">{{ title }}</div>
    </el-scrollbar>
    <!--  编辑-->
    <el-dialog title="编辑" :visible.sync="dialogShow" width="500px">
      <el-form ref="formB" :model="formB" :rules="rulesB" label-width="100px" style="margin-right: 50px">
        <el-form-item label="账号：" prop="userName">
          <el-input v-model="formB.userName" :disabled="true"/>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input v-model="formB.newPassword"/>
        </el-form-item>
        <el-form-item label="验证码：" prop="verificationCode">
          <el-input v-model="formB.verificationCode" maxlength="4" minlength="4"/>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button @click="dialogShow= false">关闭</el-button>
          <el-button type="primary" @click="submitB()" :loading="loading">提交</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import service from "../../api/service";

export default {
  name: "login",
  data() {
    return {
      isPassword: false,
      showBox: false,
      baseURL: service.baseURL,
      title: '技术支持：辽宁明华有限公司 - ®版权声明',
      form: {
        username: '',
        key: new Date().getTime(),
        password: '',
        grant_type: 'verify',
        verify: '',


      },
      dialogShow: false,
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ]
      },
      formB: {
        userName: '',
        newPassword: '',
        verificationCode: ''
      },
      rulesB: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ],
        verificationCode: {required: true, message: '请输入验证码', trigger: 'blur'}
      },
    }
  },
  mounted() {
    this.showBox = true
  },
  methods: {
    //登录方法
    login() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在登录',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          service.login({...this.form}).then(res => {
            loading.close();
            this.$router.push({path: '/home'})
          }).finally(fin => {
            this.verifyClick()
            loading.close();
          })
        }
      })
    },
    //获取验证吗
    verifyClick() {
      this.form.key = new Date().getTime()
    },
    //忘记密码
    forgotPassword() {
      if (!this.form.username) {
        this.$message.warning("请输入用户名")
      }
      this.$confirm('系统将发送验证码到您注册的邮箱，请注意查收?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        service.get('/small-service-account/au-user/forgotPassword', {
          userName: this.form.username
        }).then(res => {
          if (res.status === 200) {
            this.dialogShow = true
            this.formB.userName = this.form.username
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    submitB() {
      this.$refs.formB.validate((valid) => {
        if (valid) {
          service.put('/small-service-account/au-user/forgotPasswordChangePassword', this.formB).then(res => {
            if (res.status === 200) {
              this.dialogShow = false
              this.$message.success("新密码设置成功请从新登录！")
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.el-input-group__append {
  border: 1px #aaaaaa solid;
}

.bottom-img {
  width: 100%;
  position: absolute;
  bottom: 2px;
  left: 0;

}

.background {
  background-color: white;
  height: 100vh;
}

input {
  height: 60px;
  width: 400px;
  border: none;
  border-bottom: 1px royalblue solid;
}

.box {
  background-color: white;
  height: 300px;
  width: 400px;
  position: absolute;
  top: 15vh;
  right: 7vw;
}

.bounce-enter-active {
  animation: bounce-in .5s;
}

.bounce-leave-active {
  animation: bounce-in .5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.fade-enter-active {
  animation: bounce-ini .5s;
}

.fade-leave-active {
  animation: bounce-ini .5s reverse;
}

@keyframes bounce-ini {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}
</style>